<template>
    <div>
        <a-list size="small">
            <a-list-item v-if="config.history">
                <span>历史记录</span>
                <template #actions>
                    <a-radio-group
                            size="small"
                            v-model:value="config.history.value"
                            @change="historyChange"
                    >
                        <a-radio-button
                                v-for="item in config.history.list"
                                :value="item.value"
                        >
                            {{item.label}}
                        </a-radio-button>
                    </a-radio-group>
                </template>
            </a-list-item>
            <a-list-item v-if="config.weather">
                <span>天气插件</span>
                <template #actions>
                    <a-radio-group
                            size="small"
                            v-model:value="config.weather.value"
                            @change="weatherChange"
                    >
                        <a-radio-button
                                v-for="item in config.weather.list"
                                :value="item.value"
                        >
                            {{item.label}}
                        </a-radio-button>
                    </a-radio-group>
                </template>
            </a-list-item>
        </a-list>
    </div>
</template>

<script>
    import {useStore} from "vuex";

    export default {
        // 组件
        components: {},
        // 数据
        data() {
            return {
                // vuex 状态
                config: useStore().state.skin.first,
            }
        },
        // DOM未渲染前调用
        created() {
        },
        // DOM渲染后调用
        mounted() {
        },
        // 方法
        methods: {
            // 设置-历史记录
            historyChange(e) {
                let that = this,
                    config = that.config,
                    value = e.target.value;
                config.history.value = value;
                that.$store.commit('setNowSkin', config);
            },
            // 设置-天气插件
            weatherChange(e) {
                let that = this,
                    config = that.config,
                    value = e.target.value;
                config.weather.value = value;
                that.$store.commit('setNowSkin', config);
            },
        }
    }
</script>

<style scoped>

</style>